import React from "react";

const List = (props) => {
  // 函数组件是可以定义事件的
  // 定义的时候需要加上const，使用的时候不需要this
  const remove = (id) => () => {
    // console.log("remove", id);
    props.onRemove(id);
  };

  return (
    <ul>
      {props.list.map((item) => (
        <li key={item.id} style={{ color: item.checked ? "red" : null }}>
          <input
            type="checkbox"
            checked={item.checked}
            onChange={(e) => props.onChangeCheck(item.id, e)}
          />
          {item.name} - <button onClick={remove(item.id)}>删除</button>
        </li>
      ))}
    </ul>
  );
};

export default List;
